<template>
    <div class="tech-shop-order-status-info">
        <div class="status-info">
            <div class="info-text">{{statusInfo.text}}</div>
            <div class="info-tip">{{statusInfo.tip}}</div>
        </div>
        <div class="action-info">
            <Button v-if="statusInfo.isHaveCancel" class="cancel-action-btn" plain size="small" @click="cancelAction">取消订单</Button>
            <Button v-if="statusInfo.isClosed" class="cancel-action-btn" plain size="small" @click="returnAction">返回</Button>
            <div v-if="statusInfo.isExpress && statusInfo.isHaveExpressInfo && !isEmptyDeliveryInfo" class="express-info">{{orderInfo.delivery_info.platform_name}}：<span id="express-value">{{orderInfo.delivery_info.platform_no}}</span><span class="copy-action" @click="copyExpressOrderNumber">复制</span></div>
            <div v-if="statusInfo.isHavePickUpCode" class="self-pick-up-code">取货码：{{orderInfo.pick_up_info.pick_up_code}}</div>
        </div>
        <input id="copy-element" type="text">
        <img class="bg-tip-img" :src="imgSrc" alt="">
        <TechDialog
            ref="cancel"
            title="取消订单"
            content="你确定取消本次订单？"
            cancelText="取消"
            okText="确定"
            @ok="cancelOrder"
            :mode="mode"
            :theme="theme"
            :styleMode="styleMode"
            container="body"
        />
    </div>
</template>

<script>
import { Button } from 'vant';
import { TechPanel, TechDialog } from '@components/base';
import ModeMixin from '@common/mixin';
import { Tip } from '@common/tip';
import { isEmptyObject, navigateBack } from '@common/utils';
export default {
    name: 'OrderStatusInfo', // 订单状态信息
    mixins: [ModeMixin],
    components: {
        Button,
        TechDialog,
    },
    props: {
        orderInfo: {
            type: Object,
            default: () => {},
        },
        statusInfo: {
            type: Object,
            default: () => {},
        },
    },
    computed: {
        imgSrc() {
            const { statusInfo } = this.$props;
            return require(`@assets/img/shop_order_${statusInfo.iconType}.png`);
        },
        isEmptyDeliveryInfo() {
            return isEmptyObject(this.$props.orderInfo.delivery_info);
        },
    },
    methods: {
        cancelAction() {
            const { statusInfo } = this.$props;
            if (statusInfo.isHavePay) {
                // 未支付，直接取消
                this.$refs.cancel.show();
            } else {
                // 已支付，申请整单取消
                this.$emit('orderRefund');
            }
        },
        returnAction () {
            navigateBack()
        },
        cancelOrder() {
            this.$emit('orderCancel');
        },
        copyExpressOrderNumber() {
            // 复制快递单号
            const elVal = document.querySelector('#express-value').innerText;
            const inputEl = document.querySelector('#copy-element');
            inputEl.value = elVal;
            inputEl.select();
            document.execCommand('Copy');
            Tip('快递单号复制成功！');
        },
    },
};
</script>

<style lang="less">
.tech-shop-order-status-info {
    background-color: #252532;
    box-shadow:0px 4px 16px -4px rgba(51,51,51,0.06);
    height: 88px;
    .m-h(@gap-md);
    position: relative;
    border-radius: @border-radius;
    .p-h(@shop-bag-gap);
    .p-v(@shop-gap-md);
    .flex-column();
    justify-content: space-between;
    .status-info {
        z-index: 10;
        .info-text {
            color: @white;
            font-size: @font-size-lg;
            line-height: 1;
            font-weight: 500;
        }
        .info-tip {
            color: @white;
            opacity: .7;
            font-size: @font-size-sm;
            .m-t(@shop-gap);
        }
    }
    .action-info {
        z-index: 10;
        .cancel-action-btn {
            background-color: transparent;
            color: @white;
            height: 28px;
            width: 80px;
            line-height: 28px;
            font-size: @shop-font-size;
        }
        .express-info {
            color: @white;
            font-size: @shop-font-size;
            .copy-action {
                font-size: @font-size-sm;
                .m-l(@shop-gap);
                .p-l(@shop-gap);
                // border-left: 1px solid @white;
                position: relative;
                &:before {
                    width: 1px;
                    height: 8px;
                    background-color: @white;
                    opacity: .3;
                    position: absolute;
                    left: 0;
                    top: 50%;
                    .m-t(-4);
                    content: '';
                }
            }
        }
        .self-pick-up-code {
            color: @white;
            font-size: @shop-font-size;
        }
    }
    #copy-element {
        position: absolute;
        left: 0;
        top: 0;
        opacity: 0;
        z-index: -10;
    }
    .bg-tip-img {
        z-index: 5;
        position: absolute;
        right: 0;
        top: 50%;
        width: 120px;
        height: 76px;
        .m-t(-38);
    }
}
</style>
